<template>
  <div style="padding: 0 15px">
    <el-steps :active="3" simple style="margin-top: 20px">
      <el-step title="类目选择" icon="el-icon-files" />
      <el-step title="添加属性" icon="el-icon-s-operation" />
      <el-step title="添加图片" icon="el-icon-picture-outline" />
      <el-step title="添加详情" icon="el-icon-notebook-2" />
    </el-steps>

    <div class="box">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <h3 style="line-height: 32px">
              <i class="el-icon-notebook-2" /> &nbsp; 商品详情
            </h3>
          </div>
        </el-col>
      </el-row>
      <div class="divider" />

      <div id="weditor" />

      <div class="divider" />

      <el-button @click="$router.go(-1)">上一步，添加图片</el-button>
      <el-button type="primary" @click="submit()">确认，添加SPU</el-button>
    </div>
  </div>
</template>
<script>
import LocalStorage from '@/utils/StorageUtils.js'
import { createSpu } from '@/api/spu.js'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      editor: {},
      ruleForm: { // 定义新建SPU完成的表单数据
        name: '',
        typeNumber: '',
        title: '',
        discription: '',
        listPrice: 0.0,
        stock: 0,
        stockThreshold: 0,
        unit: '',
        brandId: 0,
        categoryId: 0,
        categoryName: '',
        albumId: 0,
        pictures: [],
        keywords: '',
        tags: '',
        sort: 10,
        detail: '',
        parentId: [0] // 默认父类别为根类别
      }
    }
  },

  mounted() {
    // https://www.wangeditor.com/v4 wangeditor 手册位置
    this.editor = new this.WEditor('#weditor')
    this.editor.config.uploadImgServer = `${process.env.VUE_APP_BASE_API}uploads/product-content-image`
    // this.editor.config.he
    this.editor.config.uploadFileName = 'images'
    this.editor.config.uploadImgMaxLength = 5
    this.editor.config.uploadImgHeaders = { Authorization: getToken() }
    // 设置回调 处理服务端返回数据结构，使得图片可以插入富文本编辑器
    this.editor.config.uploadImgHooks = {
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
      customInsert: function(insertImgFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result)
        if (result.code === 20000) {
          // 上传图片，插入富文本编辑器
          const imagesUrls = result.data
          imagesUrls.forEach((url) => {
            insertImgFn(url)
          })
        } else {
          this.$message.error('上传图片失败')
        }
      }
    }
    this.editor.create()
    // 动态加载完整的Form表单
    this.ruleForm = LocalStorage.get(LocalStorage.KEY_ADD_SPU)
    if (this.ruleForm.detail) {
      // 在富文本编辑器中显示商品详情
      this.editor.txt.html(this.ruleForm.detail)
    }
  },

  methods: {
    /** 提交完整的表单，新增SPU */
    submit() {
      // 将富文本存入表单
      const html = this.editor.txt.html()
      this.ruleForm.detail = html
      // 表单整理完毕
      console.log('完整表单数据', this.ruleForm)
      // 提交表单，新增SPU
      createSpu(this.ruleForm).then(response => {
        console.log('新增SPU', response)
        // 清除缓存
        LocalStorage.remove(LocalStorage.KEY_ADD_SPU)
        this.$router.push({ path: '/spu/list' })
      })
    }
  }
}
</script>
